<template>
    <!-- 过滤器 -->
    <div class="sort">
        <!-- 分类收起显示 -->
        <div :class="{ ischeck: ischeck == true ? 'ischeck' : '' }">
            <div class="sort-item" v-for="(sort, index) in list" :key="index">
                <div class="caption">{{ sort.label }}:</div>
                <div class="option">
                    <div class="optopn-item" :class="{ active: isStyle == row.id }" @click="changeIsStyle(row)" v-for="row in sort.choises" :key="row.id">{{ row.name }}</div>
                </div>
            </div>
        </div>
        <p class="sort-bottom">
            <span class="unfold" v-if="ischeck" @click="changeIsCheck">展开全部</span>
            <span class="unfold" v-else @click="change">收起</span>
        </p>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

//控制展开 收起的数据
const ischeck = ref(true);
//展开全部
const change = () => {
    ischeck.value = true;
};
//收起
const changeIsCheck = () => {
    ischeck.value = false;
};

const isStyle = ref("");
const changeIsStyle = (row: any) => {
    isStyle.value = row.id;
};

defineProps<{
    list: any;
}>();
</script>

<style scoped>
.sort {
    box-sizing: border-box;
    width: 1200px;
    padding: 26px 30px;
    border-radius: 4px;
    background-color: #fff;
    margin-bottom: 10px;
    margin: 0 auto;
}
.sort-item {
    display: flex;
}
.sort-item .caption {
    color: #b1b5c1;
    padding: 7px 0;
    width: 10%;
    font-size: 14px;
}
.sort-item .option {
    width: 90%;
    color: #7d8090;
    display: flex;
    align-items: center;
    flex-flow: wrap;
}
.optopn-item {
    box-sizing: border-box;
    padding: 7px 13px;
    margin-bottom: 10px;
    margin-right: 20px;
    font-size: 14px;
    cursor: pointer;
}
.optopn-item.active {
    box-sizing: border-box;
    padding: 7px 13px;
    margin-bottom: 10px;
    margin-right: 20px;
    font-size: 14px;
    background-color: #f93684;
    color: #fff;
    border-radius: 8px;
}
.sort-bottom {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.unfold {
    color: #fa3c8e;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}
.ischeck {
    height: 133px;
    overflow: hidden;
}
</style>
